<template>
	<view>
		<u-navbar :border-bottom="false" immersive back-icon-color="#fff" title-color="#fff" :background="background"
			title="订单详情"></u-navbar>
		<block v-if="info">
			<view class="w-1 t-box fl-e-c">
				<view class="address-box fl-s-s">
					<view class="fr-s-c w-1">
						<text class="fs-30 text-line-1">{{info.address_info.name}}</text>
						<text class="fs-30 m-l-20 flex-1">{{info.address_info.mobile}}</text>
					</view>
					<text class="text-line-2 fs-30 m-t-10"
						style="color: #666666;">{{info.address_info.address + ' ' + info.address_info.more_address}}</text>
				</view>
				<image src="/static/images/user/order_detail_bar.png" class="bar-img"></image>
			</view>
			<view class="goods-box fr-s-s" v-for="(item,index) in info.order_items" :key="index">
				<image :src="item.pro_thumb" class="goodsimg" mode="aspectFill"></image>
				<view class="flex-1 m-l-20 fl-b-s" style="height: 128rpx;">
					<view class="w-1 fr-b-c">
						<text class="text-line-1 flex-1">{{item.pro_title}}</text>
						<view class="status" v-if="(item.status==-1 || item.status==-2 || item.status==-3)">交易关闭</view>
						<view class="status" v-if="item.status==0">待付款</view>
						<view class="status" v-if="item.status==1 && item.status==1">待发货</view>
						<view class="status" v-if="[4,5,6].includes(item.status)">退款中</view>
						<view class="status" v-if="[-4,-3].includes(item.status)">退款成功</view>
						<view class="status" v-if="item.status==2 && item.delivery_type==1">已发货</view>
						<view class="status" v-if="item.status==3 || item.status==5">交易完成</view>
					</view>
					<text class="gg-t" v-if="item.pro_attr">规格：{{item.pro_attr}}</text>
					<view class="fr-b-e w-1">
						<text class="g-price">￥{{item.pro_price}}</text>
						<text class="c-99 fs-24">x{{item.num}}</text>
					</view>
				</view>
			</view>
			<!-- 各种价格展示 -->
			<view class="all-price">
				<view class="w-1 fr-b-c c-99 fs-24">
					<text>商品总价</text>
					<text>￥{{info.pay_money}}</text>
				</view>
				<view class="w-1 fr-b-c c-99 fs-24 m-t-30">
					<text>会员折扣</text>
					<text>-￥{{info.discount_money}}</text>
				</view>
				<view class="w-1 fr-b-c c-99 fs-24 m-t-30">
					<text>优惠券</text>
					<text>-￥{{info.coupon_use}}</text>
				</view>
				<view class="w-1 fr-b-c c-99 fs-24 m-t-30">
					<text>积分抵扣</text>
					<text>{{info.score_money}}</text>
				</view>
				<view class="w-1 fr-b-c c-99 fs-24 m-t-30">
					<text>运费</text>
					<text>￥{{info.freight_money}}</text>
				</view>
				<view class="m-t-30">
					<u-line color="#F4F4F4" />
				</view>
				<view class="w-1 fr-b-c c-99 fs-24 m-t-30">
					<text class="fs-30 c-00">实付款</text>
					<text style="color: #FA360A;">￥{{info.pay_money}}</text>
				</view>
			</view>
			<!-- 订单相关 支付方式 -->
			<view class="all-price">
				<!-- 外层 整个订单 订单状态 0待付款 1代发货 （status=2 && delivery_type==1）卖家已发货 (status==3 或 status==5)交易成功 status==-1 或 status==-2 或 status==-3交易关闭 -->
				<view class="w-1 fr-s-c c-99 fs-24">
					<text>订单编号</text>
					<view class="fr-b-c flex-1 m-l-30">
						<text>{{info.order_id}}</text>
						<text @click="copy" style="color: #FA8B0A;">复制</text>
					</view>
				</view>
				<view class="w-1 fr-s-c c-99 fs-24 m-t-30">
					<text>创建时间</text>
					<text class="m-l-30">{{info.creat_time}}</text>
				</view>
				<view class="w-1 fr-s-c c-99 fs-24 m-t-30" v-if="info.status/1>1">
					<text>付款时间</text>
					<text class="m-l-30">{{item.pay_time}}</text>
				</view>
				<view class="w-1 fr-s-c c-99 fs-24 m-t-30" v-if="info.status/1>1">
					<text>支付方式</text>
					<!-- 1余额支付 2微信支付3支付宝 -->
					<text class="m-l-30">{{item.pay_to}}</text>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					// background: 'transparent',
					background: 'linear-gradient(180deg, #FA360A 0%, #FA8C0A 100%)',
					backgroundSize: '750rpx 410rpx'
				},
				order_id: '',
				info: null
			}
		},
		onLoad(e) {
			this.order_id = e.order_id
			this.getInfo()
		},
		methods: {
			// 获取订单详情
			getInfo() {
				this.$get({
					url: '/mainwxapp/mainShopOrderDetails',
					data: {
						order_id: this.order_id
					}
				}).then(res => {
					this.info = res.order
				})
			},
			copy() {
				uni.setClipboardData({
					data: this.order_id,
				})
			}
		}
	}
</script>

<style>
	page {
		background: #f4f4f4;
	}

	.t-box {
		width: 750rpx;
		height: 410rpx;
		background: linear-gradient(180deg, #FA360A 0%, #FA8C0A 100%);
	}

	.address-box {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 0 0;
		padding: 30rpx;
	}

	.bar-img {
		width: 686rpx;
		height: 4rpx;
	}

	.goods-box {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 0 0 16rpx 16rpx;
		margin: auto;
		padding: 30rpx;
	}

	.goodsimg {
		width: 128rpx;
		height: 128rpx;
		border-radius: 12rpx;
	}

	.status {
		padding: 0 8rpx;
		height: 32rpx;
		background: rgba(250, 54, 10, 0.1);
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-size: 20rpx;
		font-family: Alibaba;
		color: #FA360A;
	}

	.gg-t {
		font-size: 24rpx;
		color: #999999;
	}

	.g-price {
		color: #FA360A;
		font-size: 32rpx;
	}

	.all-price {
		margin: auto;
		margin-top: 30rpx;
		width: 686rpx;
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
</style>
